<!DOCTYPE html>
<html>

<head>
  {include file="public/meta" /}
  <link rel="stylesheet" href="__ADDON__/css/show.css?v={$Think.config.site.version}" />
  <link rel="stylesheet" href="__ADDON__/css/swiper.min.css?v={$Think.config.site.version}" />

</head>

<body>
  <div id="app" v-cloak>
    <mt-header title="会议室">
      <a slot="left" href="javascript:;" onClick="javascript :history.back(-1);">
        <mt-button icon="back">返回</mt-button>
      </a>
    </mt-header>
    <div class="room">
      <div class="roomIfo" style="overflow: hidden;">
        <div class="thumb">
          <img :src="info.thumb" />
        </div>
        <div class="content">
          <p class="title" v-html="info.title"></p>
          <span class="examine"  v-if="info.is_verify"><i></i>需审核</span>
          <div class="badge">
            <span class="badgeLabel">{{info.people}}人</span>
            <span class="badgeLabel magrinLeft" v-for="(val,index) in info.facilities">{{val.name}}</span>
          </div>
        </div>
      </div>

    </div>
    <div class="form">
      <mt-field label="主题" placeholder="请输入会议主题" v-model="order.title">
        <!-- <span @click="" class="formChoice">模板</span> -->
      </mt-field>
      <!--日期选择-->
      <template>
        <mt-datetime-picker ref="picker" type="date" :start-date="new Date" @confirm="selectDate">
        </mt-datetime-picker>
      </template>
      <a class="mint-cell mint-field">
        <div class="mint-cell-left"></div>
        <div class="mint-cell-wrapper">
          <div class="mint-cell-title">
            <span class="mint-cell-text">日期</span>
          </div>
          <div class="mint-cell-value">
            <input placeholder="请选择会议日期" class="mint-field-core" @focus="openPicker" v-model="order.date">
            <span class="week" v-if="weeks[week]" v-html="weeks[week]"></span>
          </div>
        </div>
        <div class="mint-cell-right"></div>
      </a>

      <a class="mint-cell mint-field times-title">
        <div class="mint-cell-left"></div>
        <div class="mint-cell-wrapper">
          <div class="mint-cell-title">
            <span class="mint-cell-text">会议时间</span>
          </div>
          <div class="mint-cell-value">
            <input placeholder="点击选择会议时间" class="mint-field-core" readonly :value="timeText">
            <span class="cancel" v-if="timeText" @click="cancel">重选</span>
          </div>
        </div>
        <div class="mint-cell-right"></div>
      </a>
      <div class="times">

        <div class="swiper-container">
          <div class="swiper-wrapper">

            <div class="swiper-slide" v-for="(v,i) in info.times">
              <p class="timeList">
                <span class="timeNum">{{i}}:00</span>
                <span v-for="(val,index) in v" class="linBg" @click="onTimeClick(val,i,index)" v-bind:class="{'gray':val,'orange':!val}"></span>
              </p>
            </div>

          </div>
          <!-- Add Arrows -->
          <!-- <div class="swiper-button-next"></div> -->
          <!-- <div class="swiper-button-prev"></div> -->
        </div>

      </div>
      <mt-field label="人数" placeholder="请输入参会人数" type="number" v-model="order.people">
        <!-- <span @click="select" class="formChoice">选择</span> -->
        <!--<mt-button @click="select"  size="small" type="primary">选择</mt-button>-->
      </mt-field>

      <!-- <mt-radio title="会议通知" :options="['微信', '邮件', '短信']" class="radioList"></mt-radio> -->

      <mt-field label="联系方式" placeholder="请输入手机号、邮箱等联系方式" type="text" v-model="order.contact"></mt-field>

      <div class="subButton">
        <mt-button @click="post" size="small" type="primary">提交</mt-button>
      </div>
    </div>

  </div>
  <script src="__ADDON__/js/swiper.min.js?v={$Think.config.site.version}"></script>
  {include file="public/script" /}
  <script src="__ADDON__/js/show.js?v={$Think.config.site.version}"></script>
</body>

</html>